<template>
  <div class="box">
    <div class="webdesign-details">
    <div class="top-operation">
      <div class="left-item" @click="goBack">
        <img class="icon" src="@/assets/back-icon.png" alt="Back" />
        <span class="text">Back</span>
      </div>
      <div class="right-item">
        <div class="filters">
         
          <div class="keyWorld">
            <el-input
              placeholder="Enter search terms"
              v-model="filters.keyWorlds"
              class="input-with-select"
            >
              <template v-slot:append>
                <el-button
                  class="search"
                  @click="handleFilterChange('keyWorlds', filters.keyWorlds)"
                  ><el-icon><search /></el-icon
                ></el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="article-content">
      <div class="content-grid">
         <BundleItem  
         :showIcon="true" 
         v-for="item in contentItems" 
         :item="item" 
         :key="item.id"
         :list="contentItems" 
         :cls="selectIds.includes(item.id)?'active':''" 
          @openModal="openModal"
         @click="handleCardClick(item.id)" />
      
        </div>
    </div>
     <div class="page">
        <el-pagination
          :page-size="pages.pageSize"
          :pager-count="pages.count"
          :current-page="pages.page"
          layout="prev, pager, next"
          :total="pages.total"
          @current-change="projectList">
        </el-pagination>
    </div>
  </div>
    <createModal :list="selectItem" :formList="formList" @remove="remove" :inline="true" @create="submit"/>
    <Modal :list="contentItems" :item="currentItem"  @closeModal="open=false" :open="open" @selectItem="submit"/>
  </div>
  
</template>

<script setup>
import createModal from '@/views/components/createModal.vue'
 import Modal from '@/views/components/modal.vue'
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import BundleItem from '@/views/components/BundleItem.vue'
import { Search } from '@element-plus/icons-vue'
import logo1 from '@/assets/1.jpg';
import logo2 from '@/assets/2.jpg';
import logo10 from '@/assets/pic1.png';
const pages=reactive({
  pageSize:10,
  page:1,
  count:11,
  total:1000
})
// 选择页码
const projectList=()=>{
  console.log(pages.page)
}
// 表单数据
const formList = reactive([{
  name: "Course Title",
  placeholder:'Please enter information',
  key: "title",
  type:'input',
  value:''
},{
  name: "Course Length",
  placeholder:'Please enter information',
  key: "length",
  type:'input',
  value:''
},{
  name: "Credits ",
  placeholder:'Please enter information',
  key: "credits ",
  type:'input',
  value:''
},{
  name: "Certificate",
  placeholder:'Please enter information',
  key: "certificate",
  type:'input',
  value:''
},{
  name: '',
  key: "file",
  type:'file',
  value:''
}]);
// 获取路由实例
const router = useRouter();
const filters = reactive({
  keyWorlds: "",
});

// 处理筛选器变化
const handleFilterChange = (filterKey, value) => {
  filters[filterKey] = value;
  console.log("筛选器变化:", filterKey, value);
};

// 内容项目
const contentItems = ref([
  {
    id: 1,
    title:"K-Means Clustering ",
    image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 2,
     title:"K-Means Clustering ",
    image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 3,
     title:"K-Means Clustering ",
    image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 4,
     title:"K-Means Clustering ",
   image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 5,
     title:"K-Means Clustering ",
    image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 6,
     title:"K-Means Clustering ",
     image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 7,
     title:"K-Means Clustering ",
     image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 8,
     title:"K-Means Clustering ",
    image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 9,
     title:"K-Means Clustering ",
     image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
  {
    id: 10,
     title:"K-Means Clustering ",
    image1: logo1,
    image2: logo2,
    image: logo10,
    timeAgo: "2 weeks ago",
    views: "86.6k",
  },
]);
// 选中id
const selectIds=ref([])
// 选中内容
const selectItem=ref([])
const open=ref(false)
const currentItem=ref([])
const handleCardClick=(id)=>{
  let index=selectIds.value.findIndex(item=>item==id)
  if(index>-1){
    selectIds.value.splice(index,1)
  }else{
    selectIds.value.push(id)
  }
  selectItem.value=contentItems.value.filter(item=>{
    if(selectIds.value.includes(item.id)){
      return item;
    }
  })
}
const openModal=()=>{
  open.value=true
}
// 返回上一页
const goBack = () => {
  router.go(-1);
};
const submit=(e)=>{
  console.log(e)
  open.value=false
}
const remove=(e)=>{
   selectIds.value=selectIds.value.filter(item=>{
    return item!=e
  })
  selectItem.value=contentItems.value.filter(item=>{
    if(selectIds.value.includes(item.id)){
      return item;
    }
  })
}
</script>

<style lang="scss" scoped>
.box{
  position: relative;
  display: flex;
  justify-content: space-between;
}
.webdesign-details {
  width: calc(100% - 442px);

  .top-operation {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .left-item {
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s ease;
      width: 111px;
      height: 40px;
      background: #201f2f;
      border-radius: 10px;
      border: 1px solid rgba(194, 194, 198, 0.4);
      justify-content: center;

      .icon {
        width: 22px;
        height: 22px;
        margin-right: 10px;
      }

      .text {
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    .right-item {
      // 筛选器样式
      flex: 1;
      display: flex;
      justify-content: end;
      .filters {
        display: flex;        
        gap: 16px;
        // flex-wrap: wrap;
        width: 100%;
        justify-content: end;
        .filter-group {
          .filter-dropdown {
            height: 40px;
            .filter-button {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 8px 16px;
              background: rgba(255, 255, 255, 0.1);
              border: 1px solid rgba(255, 255, 255, 0.2);
              border-radius: 6px;
              color: #fff;
              font-size: 14px;
              cursor: pointer;
              transition: all 0.3s ease;
              min-width: 140px;
              justify-content: space-between;

              &:hover {
                background: rgba(255, 255, 255, 0.15);
                border-color: rgba(255, 255, 255, 0.3);
              }

              .dropdown-icon {
                font-size: 12px;
                transition: transform 0.3s ease;
              }
            }
          }
        }
        .keyWorld{
          width: calc(100% - 150px);
          max-width: 563px;
        }
        .top {
          display: flex;
          justify-content: space-between;
          align-content: center;

        }
        .search{
          color: #fff;
          font-size: 26px;
          display: flex;
          align-items: center;  
          .el-icon{
            color: #fff;
          }
        }
        :deep(.el-input__wrapper){
          border-right: none;
          box-shadow: none;
          border: 1px solid #C2C2C6;
          border-radius: 10px;
          padding-right: 55px;
          max-width: 563px;
          height: 40px;
        }
        :deep(.el-input-group__append){
          box-shadow: none;
          border-radius: 10px;
          margin-left: -55px;  
          width: 55px;
          background: rgba(219,66,53,0.48);
        }
      }
    }
  }

  .article-content {
    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
      gap: 20px;

    }
  }
}
.page{
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 20px;
  align-items: center;
}
</style>
